<form class="layui-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id)">
    <div class="main-container">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-inline">
                <ul id="parent" class="dtree" data-id="0" data-value="#(bean.parentId)"></ul>
            </div>
            <label class="layui-form-label required">状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="ON" title="启用" #if(bean.status == 'ON' || bean.status == null) checked #end>
                <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status == 'OFF') checked #end>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" value="#(bean.name)" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
            <label class="layui-form-label required">类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-filter="type" lay-verify="required">
                    <option value="">-- 请选择 --</option>
                #DICTS("permission_type")
                    #for(item : dicts)
                    <option value="#(item.value)" #if(item.value == bean.type) selected #end>#(item.label)</option>
                    #end
                #end
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required|number" autocomplete="off" placeholder="小到大排列" class="layui-input" value="#(bean.sort)">
            </div>
            <label class="layui-form-label MENU">图标</label>
            <div class="layui-input-inline MENU">
                <input type="text" id="icon-picker" name="icon" lay-filter="LAY-iconPicker" class="layui-input" value="#(bean.icon)">
            </div>
        </div>
        <div class="layui-form-item layui-block">
            <label class="layui-form-label">权限值</label>
            <div class="layui-input-block">
                <input type="text" name="value" autocomplete="off" placeholder="用于权限校验的字串" class="layui-input" value="#(bean.value)">
            </div>
        </div>
        <div class="layui-form-item layui-inline MENU">
            <label class="layui-form-label">打开方式</label>
            <div class="layui-input-inline">
                <select name="target" lay-filter="">
                    <option value="">-- 请选择 --</option>
                #DICTS("menu_target")
                    #for(item : dicts)
                    <option value="#(item.value)" #if(item.value == bean.target) selected #end>#(item.label)</option>
                    #end
                #end
                </select>
            </div>
            <label class="layui-form-label MENU">请求方法</label>
            <div class="layui-input-inline">
                <select name="method" lay-filter="">
                    <option value="">-- 请选择 --</option>
                #DICTS("menu_method")
                    #for(item : dicts)
                    <option value="#(item.value)" #if(item.value == bean.method) selected #end>#(item.label)</option>
                    #end
                #end
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-block MENU">
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" autocomplete="off" placeholder="'/'开头或http(s)开头的URL地址" class="layui-input" value="#if(bean.url)#(bean.url)#else#('#')#end">
            </div>
        </div>
        <div class="layui-form-item layui-block">
            <label class="layui-form-label">CSS CLASS</label>
            <div class="layui-input-block">
                <input type="text" name="cssClass" placeholder="页面CSS的class定义" autocomplete="off" class="layui-input" value="#(bean.cssClass)">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-block" style="display: none;">
        <div class="layui-input-block">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="data-save" id="data-save">
                <i class="layui-icon layui-icon-ok"></i> 提交
            </button>
        </div>
    </div>
</form>
#include("/admin/_common/foot.html")
<script type="text/javascript">
layui.use(['jquery', 'form', 'common', 'iconPicker', 'dtree'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var common = layui.common;
    var iconPicker = layui.iconPicker;
    var dtree = layui.dtree;
    
    // 模块操作路径
    var MODULE_PATH = "#CTX()/admin/system/permission/";

    // 图标选择
    iconPicker.render({
        elem: '#icon-picker'
        ,type: 'fontClass'
        ,page: true
        ,search: true
        ,limit: 16
        ,click: function(obj){},
        ready: function(){}
    });

    /*
     * 刷新合作商树
     */
    dtree.renderSelect({
        elem: "#parent", // 树绑定的元素ID
        initLevel: "2", // 默认展开层级
        url: MODULE_PATH + "dtree", // 异步数据接口
        method: 'get', // 异步请求方法
        line: true, // 开启树线
        none: "无数据...", // 初始化未加载节点时的提示文字
        ficon: ["-1", "-1"], // 一级图标非叶子节点：0：文件夹，1：方形加减，2：三角形，-1：不显示一级图标非叶子节点。一级图标叶子节点：0：文件夹，1：人员，2：机构，3：报表，4：信息，5：叶子，6：勋章，7：文件，8：小圆点，9：齿轮，10：星星， -1：不显示一级图标叶子节点
        icon: ["1","8"], // 二级图标非叶子节点：0：文件夹，1：方形加减，2：三角形，-1：不显示二级图标非叶子节点。二级图标叶子节点：0：文件夹，1：人员，2：机构，3：报表，4：信息，5：叶子，6：勋章，7：文件，8：小圆点，9：齿轮，10：星星， -1：不显示二级图标叶子节点
        selectInputName: {nodeId: "parentId"} // 用于Form表单提交的字段名
    });
    
    /*
     * 监听类型下拉框操作
     */
    form.on('select(type)', function(data){
          window.typeChanged(data.value); //得到被选中的值
    });
    
    // 类型变化操作
    window.typeChanged = function(type) {
        if (type == "MENU") {
            $(".MENU").show();
        } else {
            $(".MENU").hide();
        }
        form.render();
    }
    
    // 页面加载完成后初始化类型
    window.typeChanged("#(bean.type)");
    
});
</script>
